<template>
	<view class="pages" :class="themeName">
		<view class="forget-pwd">
			<view class="flex row-between">
				<view class="forget-pwd-text">填写购梯信息</view>
				<view @click="orderlist">我的意向购梯 ></view>
			</view>
			<view class="input m-t-40">
				<u-field
					label-width="0"
					v-model="ferget.name"
					type="text"
					:password-icon="false"
					placeholder="输入真实姓名"
					:border-bottom="false"
					:style="{ width: '100%' }"
				></u-field>
			</view>
			<view class="input m-t-40">
				<u-field label-width="0" v-model="ferget.phone" placeholder="输入手机号" :border-bottom="false" :style="{ width: '100%' }" type="number" />
			</view>
			<view class="input m-t-40" @click="showPicker = true">
				<view class="m-l-30">
					<text v-if="!ferget.type" class="lighter">选择电梯类型</text>
					<text v-else>{{ ferget.type }}</text>
				</view>
				<!-- <u-field
					label-width="0"
					v-model="ferget.type"
					type="text"
					:password-icon="false"
					placeholder="选择电梯类型"
					:border-bottom="false"
					:style="{ width: '100%' }"
				></u-field> -->
			</view>
			<!-- 修改组件 -->
			<u-picker mode="selector" v-model="showPicker" confirm-color="#101010" :default-selector="[0]" :range="appConfig.type" @confirm="changeSexConfirm" />
			<view class="input m-t-40">
				<u-field
					label-width="0"
					v-model="ferget.address"
					type="text"
					:password-icon="false"
					placeholder="输入安装地点"
					:border-bottom="false"
					:style="{ width: '100%' }"
				></u-field>
			</view>
			<view class="input m-t-40">
				<u-field
					label-width="0"
					v-model="ferget.content"
					type="text"
					:password-icon="false"
					placeholder="输入电梯详细信息（几层几站）"
					:border-bottom="false"
					:style="{ width: '100%' }"
				></u-field>
			</view>

			<button class="forget-pwd-btn m-t-40 white" @tap="fergetFun">立即提交</button>
		</view>
	</view>
</template>

<script>
import { insertGtxq } from '@/api/user';
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			ferget: {
				phone: '',
				name: '',
				address: '',
				type: '',
				content: ''
			},
			showPicker: false //电梯类型
		};
	},
	computed: {
		...mapGetters(['appConfig'])
	},
	methods: {
		// 修改
		changeSexConfirm(value) {
			// console.log(value[0])
			let index = value[0];
			// console.log(this.appConfig.type[index]);
			this.ferget.type = this.appConfig.type[index];
			this.showPicker = false;
		},
		fergetFun() {
			let { phone, name, address, type, content } = this.ferget;
			if (!name) {
				this.$toast({
					title: '请输入姓名'
				});
				return;
			}
			if (!phone) {
				this.$toast({
					title: '请输入手机号'
				});
				return;
			}
			if (!address) {
				this.$toast({
					title: '请输入安装地址'
				});
				return;
			}
			if (!type) {
				this.$toast({
					title: '请选择安装类型'
				});
				return;
			}
			if (!content) {
				this.$toast({
					title: '请输入电梯详细信息'
				});
				return;
			}
			insertGtxq({
				phone,
				name,
				address,
				type,
				content
			}).then((res) => {
				this.$toast({
					title: '提交成功'
				});
				setTimeout(() => {
					this.$Router.back(1);
				}, 1500);
			});
		},
		orderlist() {
			console.log('我的');
			uni.navigateTo({
				url:'/bundle/pages/intention/list?type=1'
			})
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: white;
	background-image: url();
}

.forget-pwd {
	padding: 60rpx;
	&-text {
		font-size: 38rpx;
	}
	.input {
		border: 1px solid #d7d7d7;
		height: 100rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
	}
	&-btn {
		margin-top: 40rpx;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		border-radius: 12rpx;
		@include background_color();
	}
	.sms-btn {
		text-align: center;
		@include font_color();
		border-left: $-solid-border;
	}
	.disabled {
		opacity: 0.5;
	}
}
</style>
